<template>

    <div id='tem'>
       <!--图片分类-->
        <div id="cate">
            <ul v-bind="{style:'width:'+ulwidth+'px'}">
                <li @click="getimglist(0)">全部</li>
                <li v-for="item in cates" @click="getimglist(item.id)">{{item.title}}</li>

            </ul>
        </div>
        <!--图片列表-->
        <div id="imglist">
           <ul>
               <li v-for="item in list">
                  <router-link v-bind="{to:'photoinfo/'+item.id}">
                      <img v-lazy="item.img_url">
                  </router-link>
                   <div id="desc">
                       <h5 v-text="item.title"></h5>
                       <p v-text="item.zhaiyao"></p>
                   </div>
               </li>
           </ul>
        </div>
    </div>

</template>


<script>
    import common from '../../kits/common.js';
    import { Taost } from 'mint-ui';

    export default{
        data(){
           return{
               ulwidth:320,
               cates:[],
               list:[]
           }
        },
        created(){
            this.getcates();
            var all=0;
            this.getimglist(all)
        },
        methods:{
            getcates(){
               var url=common.apidomain+'/api/getimgcategory';
                this.$http.get(url).then(function(res){
                    if(res.body.status!=0){
                        Toast(res.body.message);
                        return;
                    }
                    this.cates=res.body.message;
                    var w=66;
                    var count=res.body.message.length+1;
                   this.ulwidth=w*count;
                })
            },
            getimglist(cateid){
               var cateid=cateid || 0;
                var url=common.apidomain+'/api/getimages/'+cateid;
                this.$http.get(url).then(function(res){
                    if(res.body.status!=0){
                        Toast(res.body.message)
                        return;
                    }
                    this.list=res.body.message;
                })
            }
        }
    }
</script>

<style scoped>
    #cate{
        width: 375px;
        min-width: 375px;
        overflow-x: auto;
    }
    #cate ul{
        margin: 0;
        padding-left: 10px;
    }
    #cate li{
        list-style: none;
        display: inline-block;
        color:#0094ff;
        font-size: 14px;
        padding-left: 10px;
        cursor: pointer;
    }
    /*图片列表*/
    #imglist{

    }
    #imglist ul{
        padding-left: 0;
    }
    #imglist li{
        list-style: none;
        position: relative;
    }
    #imglist img{
        width: 100%;
        height: 300px;
    }
    #desc{
        width: 100%;
        background-color: rgba(0,0,0,.2);
        position: absolute;
        bottom: 2px;
        left: 0;
    }
    #desc h5{
        color:#fff;
        font-weight:bold;
    }
    #desc p{
        color:#fff;
    }

    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }
</style>
